import { PageContainer } from '@ant-design/pro-layout';
import React, { useState, useRef, useEffect } from 'react';
import { Card, Form, Input, DatePicker, InputNumber, Button, Select, Radio, message } from 'antd';
import { Updatepassword } from '@/services/ant-design-pro/apis';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const { Option } = Select;

const Test = (props) => {
  const [form] = Form.useForm();
  const [stepFormVals, setStepFormVals] = useState([]);

  const onReset = () => {
    form.resetFields();
  };

  const handleSubmit = async () => {
    try {
      const fieldVlas = await form.validateFields();
      if (fieldVlas.newPassword != fieldVlas.confirmPassword) {
        message.error('两次密码不一致');
        return;
      }
      await Updatepassword({ ...fieldVlas });
      message.success('提交成功');
      onReset();
    } catch (err) {
      message.error('提交失败');
      console.log(err);
    }
  };

  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 7,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 12,
      },
      md: {
        span: 10,
      },
    },
  };

  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 10,
        offset: 7,
      },
    },
  };

  const onFinish = (values) => {
    console.log(values);
  };

  return (
    <PageContainer title="修改密码">
      <Card>
        <Form form={form} name="basic" onFinish={onFinish}>
          <FormItem
            {...formItemLayout}
            label="旧密码"
            name="oldPassword"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input.Password placeholder="请输入旧密码" />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="新密码"
            name="newPassword"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input.Password placeholder="请输入新密码" />
          </FormItem>

          <FormItem
            {...formItemLayout}
            label="确认密码"
            name="confirmPassword"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input.Password placeholder="请输入新密码" />
          </FormItem>

          <FormItem {...submitFormLayout}>
            <Button type="primary" htmlType="submit" onClick={handleSubmit}>
              提交
            </Button>
          </FormItem>
        </Form>
      </Card>
    </PageContainer>
  );
};

export default Test;
